<template>
	<view class="box-bg">
		<view class="login-con">
			<view class="title">
				<p data-text="逃出五角大楼"> 逃出五角大楼 </p>
			</view>
			<view class="nickName">
				<uni-easyinput v-model="nickName" :styles="styles" :placeholderStyle="placeholderStyle" placeholder="请输入昵称"@input="input" maxlength="8" ></uni-easyinput>
				
			</view>
			<view class="nickName">
				<uni-easyinput v-model="password" :styles="styles" :placeholderStyle="placeholderStyle" placeholder="请输入密码"@input="input" type="password" maxlength="12"></uni-easyinput>
				
			</view>
			<view class="go-loading">
				<button @click="goLoad">进入游戏</button>
			</view>
		</view>
	</view>
	
		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message type="error" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
</template>

<script>
import { gameLogin } from '../../api/login';

	export default {
		data() {
			return {
				messageText:"账号或密码不能为空",
				nickName:"",
				password:""
			}
		},
		methods: {
			goLoad(){
				if(this.nickName ==""){
					this.messageText="账号不能为空";
					this.$refs.message.open();
					return;
				}
				if(this.password ==""){
					this.messageText="密码不能为空";
					this.$refs.message.open();
					return;
				}
				let data ={
					"nickName":this.nickName,
					"password":this.password
				}
				gameLogin(data).then((result)=>{
					console.log(result);
					uni.setStorageSync("token",result.data.token);
					//用户信息
					uni.setStorageSync("userInfo",result.data);
				})
				uni.redirectTo({
					url:"/pages/load_page/load_page"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	
	
html, body {
    width: 100%;
    height: 100%;
    background-image: radial-gradient(ellipse farthest-side at 0% 0%, #455A64 0%, #263238 60%, #1a2327 100%);
    // display: flex;
}

p {
    position: relative;
    margin: auto;
    font-size: 2rem;
    word-spacing: 0.2em;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    color: transparent;
    background-color: #E8A95B;
    background-clip: text;
}

p::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background-image: linear-gradient(120deg, transparent 0%, transparent 6rem, white 11rem, transparent 11.15rem, transparent 15rem, rgba(255, 255, 255, 0.3) 20rem, transparent 25rem, transparent 27rem, rgba(255, 255, 255, 0.6) 32rem, white 33rem, rgba(255, 255, 255, 0.3) 33.15rem, transparent 38rem, transparent 40rem, rgba(255, 255, 255, 0.3) 45rem, transparent 50rem, transparent 100%);
    background-clip: text;
    background-size: 150% 100%;
    background-repeat: no-repeat;
    animation: shine 2s infinite linear;
}

@keyframes shine {
    0% {
        background-position: 50% 0;
    }
    100% {
        background-position: -190% 0;
    }
}
	
	
	
	
.box-bg{
		width: 100%;
		height: 100vh;
		background: url("https://tcwjdl.oss-cn-chengdu.aliyuncs.com/home_bg.jpeg");
		background-size: 100% 100%;
		overflow: hidden;
	}
.login-con{
		width: calc(80% - 20px);
		height: 250px;
		background-color: rgba(255, 255, 255, 0.6);
		margin: auto;
		margin-top: 150px;
		border-radius: 10px;
		padding: 20px 10px;
	}
.title{
	width: 100%;
	height: 30px;
	font-size: 30px;
	font-weight: bold;
	margin: auto;
	text-align: center;
}
.nickName{
	margin-top: 30px;
}
.go-loading{
	width: 100%;
	margin-top: 30px;
	
	box-shadow: inset 0 0 0 3px #fff;
	margin: 50px auto;
	text-align: center;
	color: #fff;
	font-size: 32px;
	cursor: pointer;
	 transform: translate(0%, -50%);
	 
}
.go-loading:hover {
    box-shadow: 0 0 0 50vmax rgba(0, 0, 0, .5);
}
</style>
